<template>
	<view class="course-detail-container">
		<!-- 头部区域 -->
		<view class="header-detail">
			<view class="video">
				<video class="videoStyle" id="demoVideo"
					src="http://114.55.8.17:8000/static/file/%E4%B8%BE%E9%87%8D%E5%A4%B1%E8%AF%AF%E9%9B%86%E9%94%A6.mp4">
				</video>
			</view>
			<view class="hd-option">
				<u-icon @click="back" name="arrow-left" color="#ffffff"></u-icon>
				<u-icon @click="changeCollte"
					:name="collected?require('../../static/imgs/collet.png'):require('../../static/imgs/collted.png')">
				</u-icon>
			</view>
			<view class="hd-footer">
				<view class="title">
					{{course.name}}
				</view>
				<view class="hd-btn">
					开始训练
				</view>
			</view>
		</view>
		<view class="course-desc">
			<view class="desc-item">
				<view class="item-title">
					<text style="font-size: 72rpx;">{{course.totalTime}}</text>
					<text style="font-size: 30rpx;">分钟</text>
				</view>
				<view class="time">
					<text>时间</text>
				</view>
			</view>
			<view class="desc-item">
				<view class="item-title" v-show="course.level===1">
					<text style="font-size: 72rpx;">L1</text>
					<text style="font-size: 30rpx;">零基础</text>
				</view>
				<view class="item-title" v-show="course.level===2">
					<text style="font-size: 72rpx;">L2</text>
					<text style="font-size: 30rpx;">高级课程</text>
				</view>
				<view class="time">
					<text>等级</text>
				</view>
			</view>
			<view class="desc-item">
				<view class="item-title">
					<text style="font-size: 72rpx;">{{course.calorie}}</text>
					<text style="font-size: 30rpx;">千卡</text>
				</view>
				<view class="time">
					<text>卡路里</text>
				</view>
			</view>
		</view>
		<!-- 训练说明 -->
		<view class="drill">
			<view class="drill-title">训练说明</view>
			<view class="drill-content">
				{{course.introduction}}
			</view>
			<view class="drill-more">
				<text>查看更多</text>
			</view>
		</view>
		<view class="equipment">
			<text>训练器材</text>
			<text>无</text>
		</view>
		<view class="course">
			<view class="course-title">课程提供</view>
			<view class="course-content">
				<u-icon :name="require('../../static/imgs/course.png')" size="50"></u-icon>
				<text>自媒体提供</text>
			</view>
		</view>
		<view class="coach">
			<view class="coach-hd">
				<text>课程教练</text>
				<view class="gz" @click="changeFollow">{{userFollow?'已关注':'关注'}}</view>
			</view>
			<view class="coach-list">
				<u-icon :name="require('../../static/imgs/user-avtar.png')" size="50"></u-icon>
				<text>{{corash.nickname}}</text>
			</view>
			<view class="list-content">
				<ul>
					<li>普拉提垫上训练导师</li>
					<li>zumba资深教练</li>
					<li>zumba资深教练</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		collect,
		cancel,
		cancelCollect,
		followCoarsh,
		unfollow
	} from "@/api/my.js"
	import {
		TOAST
	} from "@/utils/utils.js"
	import {
		courseInfo,
		follow
	} from "@/api/course.js"
	export default {
		data() {
			return {
				isCollte: false,
				courseId: "",
				course: {},
				corash: {},
				userId: "",
				collected: "",
				userFollow: "",
			};
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			changeCollte() {
				if (this.collected) {
					cancelCollect({
						courserId: this.courseId
					}).then(res => {
						if (res.code === 200) {
							TOAST("取消收藏")
							this.getCourseInfo()
						}
					})
				} else {
					collect({
						courserId: this.courseId
					}).then(res => {
						if (res.code === 200) {
							TOAST("收藏成功")
							this.getCourseInfo()
						}

					})
				}
			},
			// 获取课程信息详情
			getCourseInfo() {
				courseInfo(this.courseId).then(res => {
					this.course = res.data.course
					this.corash = res.data.userInfo
					this.userId = res.data.userInfo.id
					// 课程关注状态
					this.collected = res.data.collected
					// 教练是否被关注过
					this.userFollow = res.data.userFollow
				})
			},
			// 关注
			changeFollow() {
				if (this.userFollow) {
					unfollow(this.userId).then(res => {
						if (res.code === 200) {
							TOAST("取消关注")
							this.getCourseInfo()
						}
					})
				} else {
					followCoarsh(this.userId).then(res => {
						if (res.code === 200) {
							TOAST("关注成功")
							this.getCourseInfo()
						}
					})
				}
			}
		},
		onLoad(option) {
			this.courseId = option.id
			this.getCourseInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.course-detail-container {
		height: 100%;
		overflow-y: auto;
		background-color: #000000;

		.header-detail {
			// padding: 40rpx 58rpx;
			// background: url(../../static/imgs/course-detail.png) no-repeat;
			// background-size: 100% auto;
			position: relative;
			width: 100%;
			.hd-option {
				width: 90%;
				position: absolute;
				display: flex;
				top:20px;
				left: 20px;
				right: 20px;
				align-content: center;
				justify-content: space-between;
				z-index: 9999999;
			}

			.hd-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 40rpx;

				.title {
					font-weight: bold;
					font-size: 48rpx;
				}

				.hd-btn {
					width: 185rpx;
					border-radius: 10rpx;
					background: #262626;
					height: 61rpx;
					line-height: 61rpx;
					text-align: center;
				}
			}
		}

		.course-desc {
			padding: 60rpx;
			background: #262626;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.desc-item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.time {
					margin-top: 20rpx;
				}
			}
		}

		.drill {
			margin-top: 20rpx;
			padding: 58rpx;
			background: #262626;

			.drill-title {
				font-size: 38rpx;
				font-weight: 400;
			}

			.drill-content {
				margin: 40rpx 0;
				text-indent: 1.2rem;
				color: #727272;
			}

			.drill-more {
				text-align: center;
				color: #727272;
				font-size: 30rpx;
			}
		}

		.equipment {
			margin-top: 20rpx;
			padding: 58rpx;
			background: #262626;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 38rpx;
		}

		.course {
			margin-top: 20rpx;
			padding: 58rpx;
			background: #262626;

			.course-title {
				font-size: 38rpx;
			}

			.course-content {
				display: flex;
				margin-top: 40rpx;
				align-items: center;

				text {
					margin-left: 40rpx;
				}
			}
		}

		.coach {
			margin: 20rpx 0 40rpx 0;
			padding: 58rpx;
			background: #262626;

			.coach-hd {
				display: flex;
				align-items: center;
				justify-content: space-between;

				text {
					font-size: 38rpx;
				}

				.gz {
					width: 95rpx;
					line-height: 40rpx;
					text-align: center;
					color: #000000;
					font-size: 18rpx;
					border-radius: 20rpx;
					background: #F4EA2A;
					height: 40rpx;
				}
			}

			.coach-list {
				margin-top: 40rpx;
				display: flex;
				align-items: center;

				text {
					margin-left: 40rpx;
				}
			}

			.list-content {
				margin-top: 20rpx;

				li {
					margin-top: 10rpx;
					color: #6F6F6F;
				}
			}
		}
	}
	.videoStyle{
		width: 100%;
		height: 430rpx;
	}
</style>
